<template>
  <div class="tablelist">
    <div class="title">
      <img src="@/assets/images/exchange.png" alt="">
      <div>{{$t("de.exchangeTable")}}</div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
        <el-table-column
          prop="token"
          :label="this.$t('de.coin')">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div v-if="scope.row.token==='DETH'"><img src="@/assets/images/ethUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DBTC'"><img src="@/assets/images/btcUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DEOS'"><img src="@/assets/images/eosUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DATX'"><img src="@/assets/images/dataxpic.png" alt=""></div>
              <span style="padding-left: 5px;">{{scope.row.token}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="trxid"
          :label="this.$t('de.hash')">
          <template slot-scope="scope">
            <span>{{scope.row.trxid.substring(0,8)+"......"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          :label="this.$t('de.quantity')">
          <template slot-scope="scope">
            <span>{{scope.row.quantity}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="blocknum"
          :label="this.$t('de.blocknum')">
          <template slot-scope="scope">
            <span>{{scope.row.blocknum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="from"
          :label="this.$t('de.fromAdress')">
          <template slot-scope="scope">
            <span style="color: #159bd5;">{{scope.row.from}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="direction"
          :label="this.$t('de.direction')">
          <template slot-scope="scope">
            <span>{{scope.row.direction}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="to"
          :label="this.$t('de.toAdderss')">
            <template slot-scope="scope">
            <span style="color: #159bd5;">{{scope.row.to}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          :label="this.$t('de.time')"
          width="170px">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          :label="this.$t('de.value')">
          <template slot-scope="scope">
            <span>{{scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
  import {getWalletTrxList} from '../../api/chainApi'
  import _ from 'lodash'
  import moment from 'moment'

  export default {
    data() {
      return {
        datxDetai:"",
        showwallet: false,
        tableData0:[],
        tableData: [
        ],
      }
    },
    created() {
      this.getlist()
    },
    methods:{
      getlist(){
        this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"));
        let arry=[]
        getWalletTrxList('DATX', this.datxDetail.name, 50).then(res => {
          let data = res.data;
          data = _.orderBy(data, ['time'], ['desc']);
          _(data).forEach(function (obj) {
            let time = moment(obj.time);
            obj.time = time.format("YYYY-MM-DD HH:mm:ss");
          });
          this.tableData = data;
          this.getExchange()
        })
      },
    getExchange(){
      this.tableData0=this.tableData;
        setInterval(() => {
          getWalletTrxList('DATX', this.datxDetail.name, 50).then(res => {
            let data = res.data;
            data = _.orderBy(data, ['time'], ['desc']);
            _(data).forEach(function (obj) {
              let time = moment(obj.time);
              obj.time = time.format("YYYY-MM-DD HH:mm:ss");
            });
            this.tableData = data;
            if(this.tableData.length>this.tableData0.length){
              this.tableData0=this.tableData;
              if(this.tableData[0].direction=="收入"){
                this.$message({
                  title: '成功',
                  message: this.tableData[0].quantity+"已经到账",
                  type: 'success'
                });
              };
            }else {
              this.tableData0=this.tableData
            }
          })
        },5000)
      }
    }
  }
</script>
<style lang="less" scoped>
  .tablelist {
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      padding: 20px;
      img {
        width: 34px;
        height: 34px;
      }
      div {
        font-size: 24px;
        padding-left: 8px;
      }
    }
    .table {
      img {
        width: 28px;
        height: 28px;
        margin-bottom: -9px
      }
      span {
        line-height: 32px;
      }
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }

    // 按键样式
    button {
      color: #fff;
      width: 60px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background-color: #98889b;
      outline: none;
      border: none;
      cursor: pointer;
    }
    button:hover {
      opacity: .8;
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }
  }
</style>



